<template>
  <div>
    <el-button type="primary" @click="add">添加检查项</el-button>
    <br />
    <div style="margin-top: 10px; display: flex">
      <div v-for="(itemsa, j) in tag" :key="j">
        <el-button
          v-if="tagValue == itemsa.id"
          type="primary"
          @click="tagClick(itemsa)"
        >
          {{ itemsa.report_name }}
        </el-button>
        <el-button v-else @click="tagClick(itemsa)">
          {{ itemsa.report_name }}
        </el-button>
      </div>
      <el-button v-if="tagValue" @click="delt(itemsa)">删除</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="检查项" prop="item_name" />
      <el-table-column label="代码" prop="item_code" />
      <!-- <el-table-column label="检查结果" prop="item_value" /> -->
      <el-table-column label="检查结果" prop="address">
        <template slot-scope="scope">
          <div v-if="scope.row.item_type == 'input_flie'">
            <el-image
              :preview-src-list="[scope.row.item_value]"
              :src="scope.row.item_value"
              style="width: 100px; height: 100px"
            />
          </div>
          <div v-else>
            {{ scope.row.item_value }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="参考值" prop="compare" />
    </el-table>
    <el-dialog
      :before-close="handleClose"
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-collapse value="1" @change="handleChange">
        <el-collapse-item
          v-for="(items, index) in lsit"
          :key="index"
          name="1"
          title="检查项"
        >
          <el-button
            style="margin-left: 90%; margin-bottom: 10px"
            @click.native="delItemData(index)"
          >
            删除
          </el-button>

          <el-form ref="form" label-width="130px" :model="form">
            <el-form-item label="检查项">
              <el-select v-model="items.goods_attr_id" placeholder="请选择">
                <el-option
                  v-for="item in goodsList"
                  :key="item.goods_attr_id"
                  :label="item.goods_name"
                  :value="item.goods_attr_id"
                  @click.native="goodsChange(index, item.goods_attr_id)"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-button style="margin-left: 50%; margin-top: 10px" @click="addaux">
        添加检查项
      </el-button>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { report, saveReport, delReport } from '@/api/reservation'

  import { getGoodsList } from '@/api/public'

  // import { getUserList } from '@/api/public'

  export default {
    props: {
      seeList: {
        type: Object,
        required: true,
      },
      pdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        lsit: [
          {
            goods_attr_id: '',
          },
        ],
        form: {},
        value: '',
        goodsList: [],
        tag: [],
        tagValue: '',
        activeNames: ['1'],
      }
    },

    watch: {
      pdata() {
        this.init()
        this.lsit = [
          {
            goods_attr_id: '',
          },
        ]
        this.goodsList = []
      },
    },
    mounted() {
      this.init()
    },
    beforeMount() {},
    methods: {
      delt() {
        const data = {
          report_id: this.tagValue,
          id: this.seeList.id,
        }
        delReport(data).then(() => {
          this.init()
          this.tagValue = ''
          this.tableData = []
        })
      },
      submit() {
        const data = {
          id: this.seeList.id,
          item: JSON.stringify(this.lsit),
        }
        saveReport(data).then(() => {
          this.init()
          this.dialogVisible = false
        })
      },
      init() {
        report(this.pdata).then((e) => {
          this.tag = e.data.menu_result
          console.log(this.tag)
          // this.tableData = e.data.menu_result
          if (e.data.menu_type == 'type') {
            const data = {
              goods_type: e.data.menu_key,
            }
            getGoodsList(data).then((e) => {
              this.goodsList = e.data
            })
          } else {
            const data = {
              method_id: e.data.menu_value,
            }
            getGoodsList(data).then((e) => {
              this.goodsList = e.data
            })
          }
        })
      },

      goodsChange(i, e) {
        const goodsList = JSON.parse(JSON.stringify(this.goodsList))
        goodsList.forEach((j) => {
          if (j.goods_attr_id == e) {
            // this.lsit[i].extend_fields = j.extend_fields
            this.lsit[i].goods_id = j.goods_id
            this.lsit[i].goods_name = j.goods_name
            this.lsit[i].goods_attr_name = j.goods_attr_name
            this.lsit[i].goods_price = j.goods_price
            this.lsit[i].delivery_method = j.delivery_method
            this.lsit[i].express_fee = j.express_fee
            this.lsit[i].type_id = j.type_id
            this.lsit[i].method_id = j.method_id
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      add() {
        this.init()
        this.dialogVisible = true
      },
      delItemData(index) {
        this.lsit.splice(index, 1)
      },
      addaux() {
        this.lsit.push({
          goods_attr_id: '',
        })
      },
      tagClick(e) {
        console.log(e)
        this.tagValue = e.id
        this.tableData = e.item
      },
      handleChange() {},
    },
  }
</script>

<style scoped>
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse;
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
